<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "" "">
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
	renderKitId="AJAX">
	<w:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<w:stylesheet src="/css/kmp4.css" type="text/css"></w:stylesheet>
		<w:script src="/javascript/k4.js" type="text/javascript" language="UTF-8"></w:script>
	</w:head>
	<w:page title="用户角色">
		<w:form id="setUserRole" onsubmit="return submitForm();">
			<layout:panelGrid columns="3">
				<layout:cell style="width:250px;">
					<fieldset style="width: 200px; border: 0;">
					<legend>已分配角色</legend>
					<h:selectManyListbox size="20" style="width: 150px;" id="usersOfRole"
						ondblclick="javascript:removeUser(this,this.value);">
						<f:selectItems value="#{system_editUserRoleBean.roleUsers}" />
					</h:selectManyListbox>
					</fieldset>
				</layout:cell>
				<layout:cell style="width:5px;">
					<input type="hidden" id="selectedRoles" name="selectedRoles"></input>
				</layout:cell>
				<layout:cell style="width:250px;">
					<fieldset style="width: 200px; border: 0;">
					<h:panelGrid columns="1" cellspacing="0">
						<h:panelGroup>
							<h:inputText id="prefix" value="#{system_editUserRoleBean.prefix}"
								valueChangeListener="#{system_editUserRoleBean.prefixChanged}" style="width: 120px;">
								<ajax:action event="onkeyup" />
							</h:inputText>
							<h:outputLabel for="prefix" value="搜索角色" />
						</h:panelGroup>
						<h:panelGroup>
							<h:selectOneListbox size="20" style="width: 150px" value="111"
								ondblclick="javascript:selectUser(this);">
								<f:selectItems value="#{system_editUserRoleBean.filteredRoles}" />
							</h:selectOneListbox>
						</h:panelGroup>
					</h:panelGrid>
					</fieldset>
				</layout:cell>
				<layout:cell colspan="3" align="center">
					<layout:panelGrid columns="2">
						<layout:cell>
							<w:button label="保存" id="saveUserRole" immediate="true"
								onclick="return showConfirm('确定保存吗？')" image="/images/save.gif"/>
						</layout:cell>
						<layout:cell>
							<w:button label="重置" onclick="javascript:window.location.reload();" immediate="true"
								alwaysSubmit="false" image="/images/clear.gif"/>
						</layout:cell>
					</layout:panelGrid>
				</layout:cell>
			</layout:panelGrid>
		</w:form>
	</w:page>
	<script>
	//<![CDATA[
	//选择用户
	function selectUser(selectObj){
		var value=selectObj.value;
		var text=selectObj.options[selectObj.selectedIndex].text;
		var roleUsers=document.getElementById("setUserRole:usersOfRole");
		addValue(roleUsers,value,text);
	}
	//删除用户
	function removeUser(objSelect,value){
		for (var i = 0; i < objSelect.options.length; i++) {    
            if (objSelect.options[i].value == value) {    
                objSelect.remove(i);
                break;
            }
        }
	}
	function addValue(selctObject,value,text){
		var isDup=false;
		for(var i=0;i<selctObject.length;i++){
		var opValue=selctObject.options[i].value;
		  if(opValue==value){
		       isDup=true;
		  }
		}
		if(!isDup){
		     var newValueOption=document.createElement("OPTION");
		     newValueOption.setAttribute("value",value);
		     newValueOption.text=text;
		     selctObject.options.add(newValueOption);
		}
	}
	function submitForm(){
		var roles=document.getElementById("selectedRoles");
		var roleUsers=document.getElementById("setUserRole:usersOfRole");
		var result="";
		for(var i=0;i<roleUsers.options.length;i++){
			result=roleUsers.options[i].value+','+result;
		}
		if(result.length>0){
			result=result.substring(0,result.length-1);
		}
		roles.value=result;
		return true;
	}
	//]]></script>
</f:view>